import React, { useEffect, useState } from "react";
import { NavBar, Badge, ProductCard } from "react-vant";
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "../../store/store";
import huo from "./images/huo.jpg";
import tui1 from "./images/tui1.jpg";
import tui2 from "./images/tui2.jpg";
import tui3 from "./images/tui3.jpg";
import tui4 from "./images/tui4.jpg";
import tui5 from "./images/tui5.jpg";
import tui6 from "./images/tui6.jpg";
import kefu from "../../assets/kefu.png";
import wen from "./images/wen.jpg";
import { Search } from "react-vant";
import styles from "./index.module.css";
import http from "../../utils/http";
import debounce from "lodash/debounce"; // 引入防抖函数
interface searchType {
  restorativesname: string;
  restorativesprice: string;
  restorativestitle: string;
  count: string;
  restorativesimage: string;
  restorativesid: string;
}
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [value, setValue] = useState("");
  const [pageSize] = useState(10);
  const [pageCode] = useState(1);
  const [searchlist, setSearchlist] = useState([]);
  const { cartlist } = useAppSelector((state) => state.cartSlice);
  const cartlength = cartlist.length;

  // 使用防抖函数包裹设置值的操作和发起请求的逻辑
  const debouncedSearch = debounce(() => {
    if (value.trim()) {
      http
        .get("/restorative/list", {
          params: {
            pageCode: Number(pageCode),
            pageSize: Number(pageSize),
            search: value.trim(), // 这里需要将value转换为数字类型
          },
        })
        .then((result) => {
          const { code, data } = result.data;
          if (code === 200) {
            setSearchlist(data);
          }
        });
    }
  }, 1000); // 这里设置防抖延迟时间为300毫秒，可根据实际调整

  useEffect(() => {
    // 当组件卸载时取消防抖函数，避免内存泄漏等问题
    return () => {
      debouncedSearch.cancel();
    };
  }, []);

  // 详情页面
  const handDetail = (item: searchType) => {
    navigate(`/buymedicinedetail/${item.restorativesid}`);
  };
  return (
    <div>
      <div className={styles.shop}>
        <NavBar title="搜索" onClickLeft={() => navigate("/shop")} />
      </div>

      <div className={styles.main}>
        {/* 搜索 */}
        <div>
          <Search
            showAction
            actionText={<div onClick={() => debouncedSearch()}>搜索</div>} // 点击搜索按钮时触发防抖后的搜索函数
            value={value}
            onChange={(newValue) => setValue(newValue)}
            placeholder="米诺地尔搽剂"
            onSearch={debouncedSearch} // 也可以通过回车等方式触发搜索，绑定防抖后的函数
          />
        </div>
        {/* 渲染搜索结果 */}
        {searchlist.length > 0 && (
          <div className={styles.searchResult}>
            <h3>搜索结果</h3>
            <ul>
              {searchlist.map((item: searchType, index) => {
                return (
                  <ProductCard
                    onClick={() => handDetail(item)}
                    key={index}
                    num={item.count}
                    desc={item.restorativestitle}
                    price={item.restorativesprice}
                    title={item.restorativesname}
                    thumb={item.restorativesimage}
                  />
                );
              })}
            </ul>
          </div>
        )}

        {/* 热门搜索 */}
        <div className={styles.relist}>
          <h3>热门搜索</h3>
          <div className={styles.yao}>
            <span>消炎镇痛膏</span>
            <span>关节止痛膏</span>
            <span>华堂宁</span>
            <span>米诺地尔酊</span>
            <span>他达拉非</span>
            <span>百乐眠</span>
            <span>对乙酰氨基酚</span>
            <span>六味地黄丸</span>
            <span>逸青鼻喷</span>
          </div>
        </div>
        {/* 热门推荐 */}
        <div className={styles.tui}>
          <h3>热门推荐</h3>
          <div>
            <div className={styles.hua}>
              <img src={tui1} alt="" />
              <div className={styles.title}>
                <p>消炎镇痛膏，哪里痛贴哪里</p>
                <div className={styles.huo}>
                  <img src={huo} alt="" />
                  <h6>人气 20861</h6>
                </div>
              </div>
            </div>
            <div className={styles.hua}>
              <img src={tui2} alt="" />
              <div className={styles.title}>
                <p>关节痛？来一贴</p>
                <div className={styles.huo}>
                  <img src={huo} alt="" />
                  <h6>人气 20577</h6>
                </div>
              </div>
            </div>
            <div className={styles.hua}>
              <img src={tui3} alt="" />
              <div className={styles.title}>
                <p>护胃早测，口臭轻松自检</p>
                <div className={styles.huo}>
                  <img src={huo} alt="" />
                  <h6>人气 20465</h6>
                </div>
              </div>
            </div>
            <div className={styles.hua}>
              <img src={tui4} alt="" />
              <div className={styles.title}>
                <p>远离哮喘，让呼吸更自由</p>
                <div className={styles.huo}>
                  <img src={huo} alt="" />
                  <h6>人气 16235</h6>
                </div>
              </div>
            </div>
            <div className={styles.hua}>
              <img src={tui5} alt="" />
              <div className={styles.title}>
                <p>圆心 您身边的祛痘专家</p>
                <div className={styles.huo}>
                  <img src={huo} alt="" />
                  <h6>人气 20861</h6>
                </div>
              </div>
            </div>
            <div className={styles.hua}>
              <img src={tui6} alt="" />
              <div className={styles.title}>
                <p>危肌困扰，无处不在</p>
                <div className={styles.huo}>
                  <img src={huo} alt="" />
                  <h6>人气 9223</h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* 客服 */}
      <div className={styles.kefu} onClick={() => navigate("/customerService")}>
        <img src={kefu} alt="" />
      </div>
      {/* 购物车 */}
      <Badge content={cartlength} className={styles.badge}>
        <div
          className={styles.gou}
          onClick={() => navigate("/BuymedicineCart")}
        >
          <img src={wen} alt="" />
        </div>
      </Badge>
    </div>
  );
};

export default Index;
